<template>
  <div>
    <Header></Header>
    <div class="scenic">
      <div class="desc_top" :data="lineInfo">
        <img :src="lineInfo.line_img" style="width: 400px" />
        <div class="adrTime">
          <h1>{{ lineInfo.line_journey }}</h1>
          <div>
            <p>景点地址：</p>
            <span>辽宁省本溪市桓仁满族自治县向阳乡G11</span>
          </div>
          <div>
            <p>开放时间：</p>
            <span>8:30-17:00（具体开放时间以景区当天公告为准）</span>
          </div>
          <div style="width: 550px">
            <p>景点简介：</p>
            <span>{{ lineInfo.line_desc }}</span>
          </div>
        </div>
        <div class="price">
          <p>￥{{ lineInfo.line_price }}起</p>
          <p>票面价：{{ lineInfo.line_price }}</p>
          <button @click="order">立即下单</button>
        </div>
      </div>
      <el-tabs type="border-card" style="margin-top: 30px" class="desc_bottom">
        <!--按钮 <el-tab-pane label="景点简介">{{lineInfo[0].line_desc}}</el-tab-pane> -->
        <el-tab-pane label="游客点评" class="bottom">
          <h1 style="margin-top: 30px; margin-bottom: 80px; color: #777">
            游客点评
          </h1>
          <div class="list" style="">
            <div v-for="(items, index) in disList" :key="index" class="content">
              <div
                style="
                  width: 90%;
                  border-bottom: 1px solid #ccc;
                  padding-bottom: 15px;
                  margin-bottom: 50px;
                "
              >
                <i class="el-icon-user-solid" style="margin-right: 10px"></i>
                {{ items.dis_content }}
              </div>
            </div>
          </div>
          <el-form class="comment">
            <el-input
              v-model="content"
              type="text"
              style="width: 90%; display: block; margin-bottom: 15px"
              placeholder="快来留下你的看法吧~"
            />
            <el-button type="primary" size="small" @click="addDis"
              >发布</el-button
            >
          </el-form>
        </el-tab-pane>
        <!-- <el-tab-pane label="位置信息" class="bottom">位置信息</el-tab-pane> -->
      </el-tabs>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Header from "../components/MyHeader.vue";
import Footer from "../components/MyFooter.vue";
import { getLineById, getPinglunByLineId, addPinglun, lineOrder } from "@/api";
import moment from "moment";
import router from '@/router';
export default {
  components: {
    Header,
    Footer,
  },
  data() {
    return {
      content: "",
      disList: [], //评论列表
      lineId: "", //线路ID
      lineInfo: {}, //线路信息
      scenicId: "",
      scenicInfo: {}, //景点信息
      user: {}, //登录后的用户信息
      from: "",
    };
  },
  mounted() {
    this.lineId = this.$route.params;
    // console.log("页面跳转传值", this.lineId);
    this.getLine();
    this.getDisList();
    this.user = JSON.parse(sessionStorage.getItem("user"));
    // console.log('用户登录ID：',this.user);
  },
  methods: {
    // 获取线路信息
    async getLine() {
      const res = await getLineById({ lineId: this.lineId.id });
      // console.log("线路ID查询线路", res);
      this.lineInfo = res.data.data[0];
    },
    async getDisList() {
      const res = await getPinglunByLineId({lineId: this.lineId.id})
      // console.log('线路ID获取评论列表', res);
      this.disList = res.data.data
    },
    async addDis() {
      if (!this.user) {
        this.$message({ type: "warning", message: "登录后才可以评论哦~" });
        this.$router.push("/login");
      } else {
        let time = moment().format("YYYY-MM-DD HH:mm");

        let params = {
          content: this.content,
          userId: this.user.user_id,
          lineId: this.lineId.id,
          disTime: time,
        };
        // console.log("输入框内容", this.content);
        // console.log("发送参数：", params);
        const res = await addPinglun(params)
        console.log('发布评论返回', res);
        if (res.data.code === 200) {
          this.$message.success('感谢您的评价')
          this.getDisList()
        }
      }
    },
    async order() {
      let order_time = moment().format("YYYY-MM-DD HH:mm:ss");
      console.log("当前时间：", order_time);
      //  debugger
      // user_id, line_id,ordered_time,total_price
      if (!this.user?.user_id) {
        this.$message({ type: "warning", message: "请先登录！" });
        this.$router.push(`/login?redirect=${router.currentRoute.fullPath}`)
      } else {
        let params = {
          user_id: this.user.user_id,
          lineId: this.lineId.id,
          ordered_time: order_time,
          total_price: this.lineInfo.line_price,
          line_name: this.lineInfo.line_name,
          line_journey: this.lineInfo.line_journey
        };
        console.log("传参：", params);
        const res = await lineOrder(params)
        console.log('下单返回', res);
        if (res.data.code === 200) {
          this.$msgbox({
              title:'订单返回',
              message:`下单成功！
              下单时间为${order_time}
              详情可以在个人信息查看喔`,
              type:'success',
          })
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.scenic {
  width: 1200px;
  margin: 50px auto;
  background-color: white;
  > .desc_top {
    display: flex;
    position: relative;
    background-color: #eee;
    padding: 10px;
    > img {
      width: 400px;
    }
    > .adrTime {
      h1 {
        margin-top: 15px;
        color: #4c5a65;
      }
      margin-left: 20px;
      // position: relative;
      > div {
        > p {
          margin-top: 30px;
          display: inline-block;
          font-weight: bold;
        }
      }

      > table {
        text-align: center;
        line-height: 50px;
        border-collapse: collapse;
        td {
          border: 1px solid #eee;
          padding: 5px;
        }
      }
    }
    > .price {
      width: 200px;
      height: 100px;
      border-radius: 100px 0 0 100px;
      background-color: orange;
      color: white;
      position: absolute;
      right: 0;
      text-align: center;
      // vertical-align: middle;
      line-height: 40px;
      top: 100px;
      > button {
        background-color: #0082fc;
        font-weight: bold;
        color: white;
        border-radius: 15px;
        height: 40px;
        padding: 10px;
        margin-top: 70px;
      }
    }
  }
  > .desc_bottom {
    .bottom {
      // height: 1200px;
      .content {
        i {
          margin-bottom: 10px;
        }
        div {
          margin-left: 30px;
        }
        margin: 20px auto;
      }
      .comment {
        padding-left: 30px;
        input {
        }
      }
    }
  }
}
</style>